<script setup>
import { useLayout } from '@/layout/composables/layout';
import { ref, computed } from 'vue';
import AppConfig from '@/layout/AppConfig.vue';

const { layoutConfig } = useLayout();

</script>

<template>
    <div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
        <div class="flex flex-column align-items-center justify-content-center">
            <div
                style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
                <div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
                    <div class="text-center mb-5">
                        <img :src="imgUrl" alt="Image" height="50" class="mb-3"
                            style="border-radius: 50px" />
                        <div class="text-900 text-3xl font-medium mb-3">欢迎访问{{ showName }}</div>
                        <span class="text-600 font-medium">登陆以继续</span>
                    </div>

                    <form>
                        <label for="username1" class="block text-900 text-xl font-medium mb-2">用户名</label>
                        <InputText id="username1" type="text" placeholder="用户名"
                            :class="[`w-full md:w-30rem mb-5`, { 'p-invalid': invalidUsername }]" style="padding: 1rem"
                            v-model="username" @blur="validateUsername" />
                        <!-- class="w-full md:w-30rem mb-5" -->

                        <label for="password1" class="block text-900 font-medium text-xl mb-2">密码</label>
                        <Password id="password1" v-model="password" placeholder="密码" :toggleMask="true"
                            :class="[`w-full mb-3`, { 'p-invalid': invalidPassword }]" inputClass="w-full"
                            :inputStyle="{ padding: '1rem' }" :feedback="false" @blur="validatePassword"></Password>
                        <!-- class="w-full mb-3 p-invalid" -->

                        <div class="flex align-items-center justify-content-between mb-5 gap-5">
                            <div class="flex align-items-center">
                                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
                                <label for="rememberme1">记住账号</label>
                            </div>
                            <!-- <a class="font-medium no-underline ml-2 text-right cursor-pointer"
                                style="color: var(--primary-color)">Forgot password?</a> -->
                        </div>
                        <Toast />
                        <Button label="Sign In" class="w-full p-3 text-xl" @Click="handleLogin();"></Button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <AppConfig simple />
</template>

<style scoped>
.pi-eye {
    transform: scale(1.6);
    margin-right: 1rem;
}

.pi-eye-slash {
    transform: scale(1.6);
    margin-right: 1rem;
}
</style>

<script>
import { jwtDecode } from "jwt-decode";

export default {
    data() {
        return {
            username: "",
            showName: "",
            password: "",
            checked: false,
            imgUrl: "/demo/images/sysUser/defaultAvatar.png",
            invalidPassword: false,
            invalidUsername: false
        }
    },
    computed: {},
    created() { },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            console.log("init")
            let token = window.localStorage.getItem("token")
            if (token == null) {
                console.log("empty")
            } else {
                const decoded = jwtDecode(token);
                console.log(decoded)
                let { data: userInfo } = await this.$http.get(`/user/getUsers/${decoded.id}`);
                console.log(userInfo)
                this.showName = ", "+ decoded.username+"!";
                this.username = decoded.username;
                this.imgUrl = userInfo.data.imgUrl;
                this.checked = true;
                window.localStorage.setItem("checked",this.checked);
                /* this.$router.push("/dashboard"); */
            }
        },
        async handleLogin() {
            console.log("handleLogin")
            if (this.username.length > 0 && this.password.length > 0) {
                console.log(this.username)
                try {
                    let { data: result } = await this.$http.post(`/user/login/${this.username}/${this.password}`);
                    this.result = result
                } catch (error) {
                    this.$toast.add({ severity: 'error', summary: 'Error', detail: error.message, life: 3000 });
                    console.log(error.message)
                    return;
                }
                console.log(this.result)
                if (this.result.code == 3800) {
                    this.$toast.add({ severity: 'error', summary: 'Error', detail: this.result.message, life: 3000 });
                    this.invalidUsername = true;
                    this.invalidPassword = true;
                } else {
                    let token = this.result.data;
                    window.localStorage.setItem("token", token);
                    window.localStorage.setItem("checked",this.checked);
                    this.$router.push("/home");
                }
            } else {
                console.log(this.$Password)
                this.$toast.add({ severity: 'info', summary: 'Attention', detail: '请填写内容', life: 3000 });
                this.invalidUsername = true;
                this.invalidPassword = true;
            }
        },
        validatePassword() {
            if (this.password.length < 1) {
                this.invalidPassword = true;
            } else {
                this.invalidPassword = false;
            }
        },
        validateUsername() {
            if (this.username.length < 1) {
                this.invalidUsername = true;
            } else {
                this.invalidUsername = false;
            }
        },
    }
}
</script>
